<template>
	<view>
		<view style='padding:15px;'>
			<h3>整改通知</h3>
			<u--form :model="formData[0]" ref="form1">
				<u-form-item label="整改对象" prop="rectifyObjName" labelWidth='240'>
					<u--input v-model="formData[0].rectifyObjName" placeholder="请选择企业名称" readonly>
					</u--input>
				</u-form-item>
				<u-form-item label="检查日期" prop="rectifyInspDate" labelWidth='240'>
					<uni-datetime-picker type="datetime" v-model="formData[0].rectifyInspDate"
						@change="showSelect=false" :disabled="true" />
				</u-form-item>
				<u-form-item label="询查人员" prop="inspPerName" labelWidth='240'>
					<u--input v-model="formData[0].inspPerName" placeholder="请选择询查人员" readonly>
					</u--input>
				</u-form-item>
				<u-form-item label="整改内容" prop="rectifyContent" labelWidth='240'>
					<u--textarea v-model="formData[0].rectifyContent" placeholder="请输入整改内容" height='150'
						:disabled="true">
					</u--textarea>
				</u-form-item>
				<u-form-item label="整改截止日期" prop="rectifyEndDate" labelWidth='240'>
					<uni-datetime-picker type="datetime" v-model="formData[0].rectifyEndDate" :disabled="true" />
				</u-form-item>
				<u-form-item prop="note" label="备注" labelWidth='240'>
					<u--textarea v-model="formData[0].note" placeholder="请输入备注" height='100' :disabled="true">
					</u--textarea>
				</u-form-item>
				<u-form-item prop="file" borderBottom label="整改通知附件" labelWidth='240'>
					<view class="file-list clearfix">
						<view class="file-item" v-for="(item,index) in formData[0].files">
							<image class="file-img" :src="item.url" mode="aspectFit"
								@click="previewImage(item,index,2)">
							</image>
						</view>
						<view class="file-item file-upload-btn" @click="selectFile(1)"></view>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<uni-collapse accordion>
			<uni-collapse-item :title="'整改反馈与复核'+(index+1)" v-for="(item,index) in formData[0].rectifyFeedbackList"
				:open="index==formData[0].rectifyFeedbackList.length-1?true:false">
				<view style='padding:15px;'>
					<h3 style='margin: 20px 0;'>整改反馈内容</h3>
					<u--form :model="item" ref="form1">
						<u-form-item label="是否完成整改" prop="isAccomplish" labelWidth='240'>
							<u-radio-group v-model="item.isAccomplish" placement="row" size='40' disabled>
								<u-radio activeColor="#1590EF" label="是" name='1' style='padding:0 60rpx 0 0'
									labelSize='30'>
								</u-radio>
								<u-radio activeColor="#1590EF" label="否" name='0' labelSize='30'></u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item prop="rectifyDesc" label="整改说明" labelWidth='240' disabled>
							<u--textarea v-model="item.rectifyDesc" placeholder="请输入整改说明" height='100' :disabled='true'>
							</u--textarea>
						</u-form-item>
						<u-form-item prop="file" borderBottom label="整改材料" labelWidth='240'>
							<view class="file-list clearfix">
								<view class="file-item" v-for="(item,index) in item.files">
									<image class="file-img" :src="item.url" mode="aspectFit"
										@click="previewImage(item,index,2)">
									</image>
								</view>
								<view class="file-item file-upload-btn" @click="selectFile(2)"></view>
							</view>
						</u-form-item>
					</u--form>
				</view>
				<view style='padding:15px;' v-for="rectifyReview in item.rectifyReviewList">
					<h3 style='margin: 0 0 10px 0;'>整改复核</h3>
					<u--form :model="rectifyReview" ref="form1">
						<u-form-item label="审核" prop="reviewStatus" labelWidth='240'>
							<u-radio-group v-model="rectifyReview.reviewStatus" placement="row"
								:disabled="rectifyReview.id" size='40'>
								<u-radio activeColor="#1590EF" label="审核通过" name='01' style='padding:0 60rpx 0 0'
									labelSize='30'>
								</u-radio>
								<u-radio activeColor="#1590EF" label="审核不通过" name='02' labelSize='30'></u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item prop="refuseStatement" label="整改审核说明" labelWidth='240'
							v-show="rectifyReview.reviewStatus == '02'">
							<u--textarea v-model="rectifyReview.refuseStatement" placeholder="请输入备注" height='100'>
							</u--textarea>
						</u-form-item>
						<u-form-item prop="reviewOpinion" label="整改审核意见" labelWidth='240'>
							<u--textarea v-model="rectifyReview.reviewOpinion" placeholder="请输入备注" height='100'>
							</u--textarea>
						</u-form-item>
						<u-form-item prop="file" borderBottom label="附件" labelWidth='240'>
							<view class="file-list clearfix">
								<view class="file-item" v-for="(item1,index) in rectifyReview.files">
									<image class="file-img" :src="item1.url" mode="aspectFit"
										@click="previewImage(item1,index,3)">
									</image>
									<view class="file-del" @click="fileDel(index,2)"></view>
								</view>
								<view class="file-item file-upload-btn" @click="selectFile(3)"></view>
							</view>
						</u-form-item>
					</u--form>
					<view class="" style="width: 100%;text-align: center;">
						<text type="primary" class="add" @click="clickSave()">确定</text>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import qianziyuSelect from '@/components/qianziyu-select/qianziyu-select.vue'
	import * as api from '@/common/api/supervision.js'
	export default {
		components: {
			qianziyuSelect
		},
		data() {
			return {
				showSelect: false,
				showTime: false,
				showCheckSelect: false,
				formData: [{
					rectifyObjId: "",
					rectifyObjName: "",
					rectifyInspDate: "",
					inspPerId: "", //检查人员id
					inspPerName: "", //检查人员name
					// patrolResult: "",
					rectifyEndDate: "",
					// sendDate: "",
					note: "",
					files: [],
					taskId: "",
					rectifyFeedbackList: [{
						isAccomplish: '',
						rectifyDesc: "",
						files: []
					}]
				}],


				aNum: 1,
				columnsCompany: [],
				companyList: [],

				nameList: [],
				columnsName: [],

				supervisionType: {
					Sid: "",
					type: '',
					inspStatus: ""
				},
			}
		},
		onLoad(option) {
			this.supervisionType = option
		},
		mounted() {
			// 详情查询
			api.default.getRectification(this.supervisionType.Sid).then(res => {
				this.formData = res.data.data
			})

		},
		methods: {
			// 新增保存
			clickSave() {
				let than = this
				const data = this.formData
				let index = data.length - 1
				let rectifyFeedbackList = data[index].rectifyFeedbackList
				let i = rectifyFeedbackList.length - 1
				let rectifyFeedback = rectifyFeedbackList[i]
				let rectifyReviewList = rectifyFeedback.rectifyReviewList
				let n = rectifyReviewList.length - 1
				let item = rectifyReviewList[n]
				let formData = {
					rectifyFeedbackId: rectifyFeedback.id,
					reviewOpinion: item.reviewOpinion,
					reviewStatus: item.reviewStatus,
					refuseStatement: item.refuseStatement,
					files: item.files,
				};
				if (!formData.reviewOpinion) {
					uni.showToast({
						title: '整改审核意见不能为空！',
						icon: 'none',
						duration: 1000
					});
					return
				}
				if (!formData.refuseStatement && formData.reviewStatus == '02') {
					uni.showToast({
						title: '整改审核说明不能为空！',
						icon: 'none',
						duration: 1000
					});
					return
				}
				api.default.getFeedbackReview(formData).then(res => {
					uni.showToast({
						title: '保存成功！',
						icon: 'success',
						duration: 2000
					})

					setTimeout(function() {
						than.$goBack('./patrolName?index=1', 5)
					}, 2000);
				})
			},

			previewImage(val, index, type) {
				// if(type==3){
					
				// }
				// console.log(val)
				// let photoList = this.formData.files.map(item => {
				// 	return item.url;
				// });
				
				// uni.previewImage({
				// 	current: index, // 当前显示图片的索引值
				// 	urls: photoList, // 需要预览的图片列表，photoList要求必须是数组
				// 	loop: true, // 是否可循环预览
				// })

			},

			// 点击选择图片
			selectFile(index) {
				if (index == 1 || index == 2) {
					return
				}
				uni.chooseImage({
					// count: (9 - this.formData.files.length),
					// sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
					success: (chooseImageRes) => {
						uni.uploadFile({
							url: '/data-inspection-study/insp_file/upload',
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								const fileData = uploadFileRes.data ? JSON.parse(uploadFileRes
									.data) : ''
								console.log(3123, fileData)
								if (fileData && fileData.code == 200) {

									this.formData[0].rectifyFeedbackList[this.formData[0]
											.rectifyFeedbackList.length - 1].rectifyReviewList[0]
										.files.push({
											id: fileData.data.id,
											url: chooseImageRes.tempFilePaths[0]
										})
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									})
								}
							}
						});
					}
				});
			},

			// 删除已上传的图片
			fileDel(index, type) {
				this.formData.files.splice(index, 1)
			},


		},
	}
</script>

<style lang="scss" scoped>
	.file-list {
		flex: 1;

		.file-item {
			float: left;
			width: 22%;
			text-align: center;
			height: 140rpx;
			line-height: 140rpx;
			margin-right: 4%;
			margin-bottom: 2%;
			position: relative;

			.file-img {
				max-width: 100%;
				max-height: 100%;
				vertical-align: middle;
			}

			.file-del {
				position: absolute;
				right: 0;
				top: 0;
				transform: translate(30%, -30%);
				border-radius: 50%;
				width: 0;
				height: 0;
				border: 20rpx solid #f00;

				&::after {
					content: "";
					width: 20rpx;
					display: block;
					transform: translate(-50%, -50%);
					background-color: #ffffff;
					height: 4rpx;
				}
			}

			&:nth-child(4n) {
				margin-right: 0;
			}

			&:nth-child(n+5) {
				margin-top: calc(4% / 3);
			}

		}

		.file-upload-btn {
			box-sizing: border-box;
			border: 1px solid #ddd;
			background: url('/static/img/camera.png') no-repeat center;
			background-size: 70%;
		}
	}

	.add {
		width: 30%;
		margin: 10px;
		display: inline-block;
		text-align: center;
		padding: 15rpx 20rpx;
		border-radius: 10px;
		background-color: #1590EF;
		color: white;
	}

	:v-deep .u-collapse-item__content__text content-class {
		padding: 0;
	}
</style>
